<template>
    <div class="page bg-white">
        <el-select v-model="checkOptionsList" multiple placeholder="请选择" size="small">
            <el-option v-for="item in departmentList" :key="item.id"  :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="moreDepartment">确 定</el-button>
        <el-button size="small" @click="resetList">清空</el-button>
        <div style="width:100%;text-align:center;font-weight:600;font-size:20px;margin-bottom:10px"><p>{{currentYears}}年{{fatherMeanName}}利润报表</p></div>
        <el-tabs type="border-card" @tab-click="handleClick" v-model="handleClickNum" style="height:100%">
            <el-tab-pane :key="index" v-for="(item, index) in optionsList" :label="item.name" :name="item.id">
                <div class="top">
                    <el-table :data="tableData" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName"
                    size="small"
                    class="table">
                        <el-table-column type="index" width="200" label="利润明细" fixed="left" align="center" show-overflow-tooltip :index="indexMethod"/>
                        <el-table-column prop="january" label="1月" align="center" @click="amountDetails">
                            <template slot-scope="scope" show-overflow-tooltip>
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'01')">{{scope.row.january}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="february" label="2月" align="center"  show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'02')">{{scope.row.february}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="march" label="3月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'03')">{{scope.row.march}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="april" label="4月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'04')">{{scope.row.april}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="may" label="5月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'05')">{{scope.row.may}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="june" label="6月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'06')">{{scope.row.june}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="july" label="7月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'07')">{{scope.row.july}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="august" label="8月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'08')">{{scope.row.august}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="september" label="9月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'09')">{{scope.row.september}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="october" label="10月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'10')">{{scope.row.october}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="november" label="11月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'11')">{{scope.row.november}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="december" label="12月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'12')">{{scope.row.december}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="total" label="合计" align="center"  show-overflow-tooltip/>
                        <el-table-column prop="remarks" label="备注" width="250" show-overflow-tooltip/> 
                    </el-table>
                </div>
                
            </el-tab-pane>
        </el-tabs>
        <el-dialog width="50%" :visible.sync="costDetailDialog" v-dialogDrag :title="costTitle">
            <el-table :data="costDetailList" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;" @cell-click="threeAmountDetails"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column prop="data" label="时间" align="center" show-overflow-tooltip>
                            <template slot-scope="scope"> {{scope.row.year}}-{{scope.row.month}} </template>
                        </el-table-column>
                        <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip/>
                        <el-table-column prop="amount" label="金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remarks" label="备注" show-overflow-tooltip/>
                    </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="costDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="costDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
export default {
    mixins: [tableStyles],
    data() {
        return {
            checkOptionsList:"",
            departmentList:[],
            amountDetailsId:"",
            costTitle:"",
            department:"",//部门id
            currentYears:"",//当前年
            currentMonths:"",//当前月
            //二级科目名称
            header: [],
            handleClickNum:0,
            optionsList:[//选项卡（总表、部门、项目..）
                {
                    id:"0",
                    name: '利润总表',
                }
            ],
            //二级科目数据
            tableData: [],
            costDetailDialog:false,//费用明细
            costDetailList:[
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
            ],
        }
    },
    computed:{
        fatherMeanName: {
            get () {
            return this.$store.state.common.fatherMeanName
            }
        },
    },
    mounted(){
        this.getCurrentTime();
        this.getCompanyByOffice();
        this.getYearProfit();
    },
    methods:{
        moreDepartment(){
            console.log("搜索",this.checkOptionsList);
            this.department=this.checkOptionsList.join(',');
            // this.getYearByOffice();
            this.$http({
                url: "/rf/profit/getOfficeProfit",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department,
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    data.list.forEach(item =>{
                        this.header.push(item.profitname);
                    })
                    this.tableData=data.list;
                    console.log("利润报表2搜搜的接口",data)
                }
            });
        },
        resetList(){
            this.checkOptionsList=[];
            this.department="";
            this.getYearProfit();
        },
        // 表格 表头纵向现实
        indexMethod(index) {
            return this.header[index]
        },
        //选项卡点击
        handleClick() {
            console.log(this.handleClickNum);
            if(this.handleClickNum!=0){
                this.department=this.handleClickNum;
                this.getYearByOffice();
            }
            else{
                this.department="";
                this.getYearByOffice();
            }
        },
        // 获取当前时间（年份）
        getCurrentTime() {
        　　this.currentYears = new Date().getFullYear(); 
        },
        //查询部门（选项卡）
        getCompanyByOffice(){
            this.$http({
                url: "/sys/office/getCompanyByOffice",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId
                },
            }).then(({ data }) => {
                this.departmentList=data.List;
                if (data && data.success) {
                    data.List.forEach(item =>{
                        console.log("便利数组",item)
                        this.optionsList.push(item);
                    })
                    console.log("部门（选项卡）",data)
                } else {
                }
            });
        },
        getYearProfit(){
            this.$http({
                url: "/rf/profit/getYearProfit",
                method: "get",
                params: {
                    companyId: this.$store.state.user.companyId
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    data.list.forEach(item =>{
                        this.header.push(item.profitname);0
                    })
                    this.tableData=data.list;
                    console.log("利润报表",data)
                }
            });
        },
        getYearByOffice(){
            this.$http({
                url: "/rf/profit/getYearByOffice",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    type:'0',
                    department:this.department,
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    data.list.forEach(item =>{
                        this.header.push(item.profitname);
                    })
                    this.tableData=data.list;
                    console.log("利润报表2",data)
                }
            });
        },
        //金额明细
        amountDetails(row, month){
            console.log(row);
            this.costTitle=row.profitname;
            this.currentMonths=month;
            this.amountDetailsId=row.id;
            if(this.department==''){
                this.costDetailDialog=true;
                this.$http({
                    url: "/rf/profit/getYearByOffice",
                    method: "get",
                    params: {
                        company: this.$store.state.user.companyId,
                        type:'1',    
                        profitreport:this.amountDetailsId,
                        yearmonth:this.currentYears+"-"+this.currentMonths
                    },
                }).then(({ data }) => {
                    if (data && data.success) {
                        console.log("费用明细1",data.list)
                        this.costDetailList=data.list;
                    }
                });
            }else{

            }
        },
        threeAmountDetails(row, column, event, cell){
            console.log(row);
            this.threeCostDetailDialog=true;
        },
        
    }
}
</script>
<style scoped>

</style>
